<!DOCTYPE HTML>
<html>
<head>
<title>PoC for BI Apps - Layout Editor v0.1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../css/common/admin_templ_style.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/style_reset.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/style_admin_tabs.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/button_content.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/form_content.css" />
<script type="text/JavaScript" src="../api/js/jquery-1.8.3.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

<link rel="stylesheet" type="text/css" href="../api/css/jquery.contextMenu.css">
<script src="../api/js/jquery.contextMenu.js" type="text/javascript"></script>
<style type="text/css">

    *[VAR_GRP] {
        border: solid 3px #666666;
    }

    *[LOC]:not(:empty) {
        border: solid 1px gray;
        background-color: #aed0ea;
        min-height: 100px;
        text-align: center;
    }

    *[LOC]:empty {
        border: solid 1px gray;
        background-color: #ffdab9;
        min-height: 100px;
        text-align: center;
    }

    *[LOC]:hover {
        background-color: #b0c4de;
        cursor: pointer;
    }

        /*-- new styles for context menu - faisal --*/
    .context-menu-item {
        padding: 2px 2px 2px 10px;
        line-height: 20px;
        font-size: 11px;
        color: #fff;
    }
</style>
<script type="text/javascript">

// otaism2a: 28,1,2014 to reduce multiple BOI.js while loading
var BOI = parent.BOI;

function save() {
    request();
}

function request() //genereates request XML
{
    var records, record, param, req, class_name, method_name;
    records = [];
    class_name = "ZCL_MYBW_REP_VAR_CAT";
    method_name = "UPDATE";

    //clear locations and groups
    for (var i in variables) {
        if (i) {
            variables[i]['VAR_GRP'] = "";
            variables[i]['VAR_LOC'] = "";
        }
    }
    //set new locations
    $('#bi_layout').find('[VAR_ID]').each(function () {
        var vname = $(this).attr('VAR_ID'); //var name
        var gid = $(this).parents('[VAR_GRP]').first().attr('VAR_GRP'); //group
        if (gid == undefined) gid = "0";
        var pid = $(this).attr('LOC'); //position
        variables[vname]['VAR_GRP'] = gid;
        variables[vname]['VAR_LOC'] = pid;
    });

    if (variables)
        for (var i in variables) //records
        {
            if (i) {
                record = new BOI.BOIData.Record();
                for (var j in variables[i]) //params
                {
                    if (j) {
                        param = new BOI.BOIData.Parameter();

                        param.name = j;
                        param.values = variables[i][j] == null ? [""] : [variables[i][j]];
                        record.parameters.push(param);
                    }
                }
                records.push(record);
            }
        }
    req = BOI.BOIData.request.prepare(class_name, method_name, records);
    $('#request').val($('#request').val() + '\n\n\n\n\n\n\n' + req);

    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
        $('#response').val(data);
        parent.reloadVariables();
        //parent.refresh(parent.current_node.data.key,'UPDATE');
        // alert($(data).find('MESSAGE').text());
        BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
    });/**/
}

var app_id, rep_id, template_id, variables = {}, isReportGroup;
$(function () {
    app_id = parent.app_id;
    if (parent.current_node)
        rep_id = parent.current_node.data.key;
    load(rep_id);

    // $('input[type="button"]').button();
    $('#btn_save').on('click', function () {
        save();
    });
});
function load(report_id) {
    if (report_id == undefined)
        return;

    //load report details
    BOI.BOIData.read.getNode(app_id, report_id, function (data) {
        var varcount = 0;
        data = $(data);

        template_id = $(data).find('LAYOUT_INFO VAR_TEMPLATE_ID').text();
        //var layout = $(data).find('VARIABLES_LAYOUT');
        // decode the text to html
        var layout_html = $(data).find('VARIABLES_LAYOUT').text();

        var layout = $('<DIV/>').html(layout_html );
        layout.find('[LOC]').html(''); //ensure all placeholders are empty on load

        //show all variables in context menu (in case of normal reports)
        var varArray = {};
        var varcount = 0;
        var queryVars = $(data).find('LAYOUT_INFO VAR_LIST').text();
        if (queryVars.indexOf('|') > -1) {
            queryVars = queryVars.split('|');
            for (var i in queryVars) {
                if (queryVars[i]) {
                    varArray[queryVars[i]] = { name: queryVars[i] };
                    varcount++;
                }
            }
        }
        else {
            if (queryVars) {
                varArray[queryVars] = { name: queryVars };
                varcount++;
            }
        }
        //in case of report group, get the variables from child report and have sub menu structure
        isReportGroup = ($(data).find('NODE_INFO NODE_TYPE').text() == 'REPORT_GROUP');

        //read variables and assign them to corresponding positions in layout
        $(data).find('VARIABLES ZBUS_VAR_META').each(function () {

            var name = $(this).find('ZVARNAME').text().trim();
            var desc = $(this).find('ZVAR_DESCRIPTION').text().trim();
            var grp = $(this).find('VAR_GRP').text().trim();
            var loc = $(this).find('VAR_LOC').text().trim();

            variables[name] = {};
            $(this).children().each(function () {
                var tag = this.tagName;
                var text = $(this).text().trim();
                variables[name][tag] = text;
            });

            var placeholder = '<h1>' + name + '</h1>' + '<p>' + desc + '</p>';

            var item = layout.find('*[VAR_GRP="' + grp + '"] *[LOC="' + loc + '"]');

            item.append(placeholder);
            item.attr('VAR_ID', name);
        });
        var html = layout.html();
        $('div#bi_layout').append(html);

        if (varcount > 0 && !isReportGroup)
            $.contextMenu({
                trigger: "left",
                selector: '*[LOC]',
                callback: function (key, options) {
                    var m = "assigned " + key + " into location " +
                            options.$trigger.attr('LOC') + " under group " +
                            options.$trigger.parents('[VAR_GRP]').first().attr('VAR_GRP');
                    //window.console && console.log(m) || alert(m);
                    //var gid = options.$trigger.parents('[gid]').first().attr('gid');
                    //var pid = options.$trigger.attr('pid');


                    //remove from the previous placeholder
                    $('div#bi_layout').find('[VAR_ID="' + key + '"]').html('');
                    $('div#bi_layout').find('[VAR_ID="' + key + '"]').removeAttr('VAR_ID');

                    //put the new variable
                    options.$trigger.attr('VAR_ID', key);
                    var placeholder = '<h1>' + key + '</h1>';
                    options.$trigger.html(placeholder);
                },
                items: varArray
            });

        if (isReportGroup) {
            var repVarArray = {};
            var tempArr = $(data).find('LAYOUT_INFO CHILD_REPORTS').text().split('|');
            for (var i in tempArr) {
                if (tempArr[i]) {
                    repVarArray[tempArr[i]] = { name: tempArr[i], items: {} };
                    var children = {};
                    var count = 0;
                    $(data).find('VARIABLES ZBUS_VAR_META').each(function () {
                        if ($(this).find('REPORT_ID').text() == tempArr[i]) {
                            var vname = $(this).find('ZVARNAME').text();
                            count++;

                            children[vname] = { name: vname };
                        }
                    });
                    if (count > 0)
                        repVarArray[tempArr[i]] = { name: tempArr[i], items: children };
                }
            }

            $.contextMenu({

                trigger: "left",
                selector: '*[LOC]',
                callback: function (key, options) {
                    var m = "assigned " + key + " into location " +
                    options.$trigger.attr('LOC') + " under group " +
                    options.$trigger.parents('[VAR_GRP]').first().attr('VAR_GRP');

                    //remove from the previous placeholder
                    $('div#bi_layout').find('[VAR_ID="' + key + '"]').html('');
                    $('div#bi_layout').find('[VAR_ID="' + key + '"]').removeAttr('VAR_ID');

                    //put the new variable
                    options.$trigger.attr('VAR_ID', key);
                    var placeholder = '<h1>' + key + '</h1>';
                    options.$trigger.html(placeholder);
                },
                items: repVarArray
            });
            //fix overflow bug
            $('ul').live('mouseover', function () { $(this).css('overflow', ''); });
        }
    });
}
</script>
</head>
<body>
<div class="tab-frame" id="bi_admin_report_assign_variables">
    <div class="tab-form">
        <div class="header">
            <h2>Assign Variables to Template</h2>

            <ul>
                <li>
                    <a id="btn_save" class="button-content-YW" href="#"><span>Save</span></a>
                </li>
                <li>
                    <p>Click on an area to assign a variable.</p>
                </li>
            </ul>
        </div>
        <div class="top-content">
            <div id="bi_layout" class="center-full"></div>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>